<template>
    <div class="container-login">

        <div class="info">
            {{inspquo}}
        </div>
        <div class="login-box">
            <div class="login-title">
                快速开发平台
            </div>
            <el-form ref="loginForm" label-position="top" :rules="rules" :model="formLogin" size="default">
                <el-form-item prop="username">
                    <el-input type="text" v-model="formLogin.username" placeholder="手机号/邮箱">
                        <template slot="prepend">账号</template>
                        <!-- <i slot="prepend" class="fa fa-user-circle-o"></i> -->
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="formLogin.password" placeholder="密码">
                        <template slot="prepend">密码</template>
                        <!-- <i slot="prepend" class="fa fa-keyboard-o"></i> -->
                    </el-input>
                </el-form-item>
                <el-form-item prop="captcha">
                    <el-input type="text" v-model="formLogin.captcha" placeholder="- - - -">
                        <template slot="prepend">验证码</template>
                        <template slot="append">
                            <img class="login-code" :src="captchaPath" @click="getCaptcha()" alt="验证码">
                        </template>
                    </el-input>
                </el-form-item>
                <div class="submit-btn" @click="submit">
                    登录
                </div>
            </el-form>

            <div class="fenge"></div>
            <div class="quite-box">
                <div class="quite-text">第三方登陆</div>
                <div class="quite-icons">
                    <d2-icon-svg name="weixin" class="quite-icon"></d2-icon-svg>
                    <d2-icon-svg name="qq" class="quite-icon"></d2-icon-svg>
                </div>
                <div class="quite-text" @click="dialogVisible = true">其他用户</div>
            </div>
        </div>
        <div class="footer">为保证最佳浏览效果，请点击下载安装Chrome浏览器</div>
        <el-dialog title="快速选择用户" destroy-on-close :visible.sync="dialogVisible" width="400px">
            <el-row :gutter="10" style="">
                <el-col v-for="(user, index) in users" :key="index" :span="8">
                    <div class="page-login--quick-user" @click="handleUserBtnClick(user)">
                        <d2-icon name="user-circle-o" />
                        <span>{{user.name}}</span>
                    </div>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>


<script>
    import * as inspquoService from '@/api/bdms/inspquo'
    import {
        mapActions
    } from 'vuex'
    import {
        getCaptcha
    } from '@/api/login'
    export default {
        data() {
            return {
                inspquo: '',
                captchaPath: '',
                // 快速选择用户
                dialogVisible: false,
                users: [{
                        name: '超级管理员',
                        username: 'admin',
                        password: '123qwe'
                    },
                    {
                        name: '鸿信01',
                        username: '18989898989',
                        password: '123qwe'
                    },
                    {
                        name: 'bbuser02',
                        username: '12304910234',
                        password: '123qwe'
                    }
                ],
                // 表单
                formLogin: {
                    username: '',
                    password: '123qwe',
                    uuid: '',
                    captcha: ''
                },
                // 校验
                rules: {
                    username: [{
                        required: true,
                        message: '请输入用户名',
                        trigger: 'change'
                    }],
                    password: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'change'
                    }],
                    captcha: [{
                        required: true,
                        message: '请输入验证码',
                        trigger: 'change'
                    }]
                }
            }
        },
        mounted() {},
        created() {
            this.getCaptcha()
            this.getInspquo()
        },
        beforeDestroy() {},
        methods: {
            ...mapActions('d2admin/account', [
                'login'
            ]),
            /**
             * @description 接收选择一个用户快速登录的事件
             * @param {Object} user 用户信息
             */
            handleUserBtnClick(user) {
                this.formLogin.username = user.username
                this.formLogin.password = user.password
                this.dialogVisible = false;
                // this.submit()
            },
            /**
             * @description 提交表单
             */
            // 提交登录信息
            submit() {
                this.$refs.loginForm.validate((valid) => {
                    if (valid) {
                        // 登录
                        // 注意 这里的演示没有传验证码
                        // 具体需要传递的数据请自行修改代码
                        this.login({
                                username: this.formLogin.username,
                                password: this.formLogin.password,
                                uuid: this.formLogin.uuid,
                                code: this.formLogin.captcha
                            })
                            .then(() => {
                                // 重定向对象不存在则返回顶层路径
                                this.$router.replace(this.$route.query.redirect || '/')
                                this.getCaptcha()
                            })
                    } else {
                        // 登录表单校验失败
                        // this.$message.error('表单校验失败')
                        this.getCaptcha()
                    }
                })
            },
            // 获取验证码
            getCaptcha() {
                this.formLogin.uuid = this.getUUID()
                this.captchaPath = process.env.VUE_APP_API + "/upms/captcha.jpg?uuid=" + this.formLogin.uuid
            },
            getUUID() {
                return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
                    return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
                })
            },
            getInspquo() {
                inspquoService.getinspquoday().then(data => {
                    this.inspquo = data.content
                })
            }
        }
    }
</script>



<style scoped lang="scss">
    .info {
        position: absolute;
        top: 40px;
        left: 50%;
        width: 100%;
        margin-left: -50%;
        text-align: center;
        font-size: 16px;
        padding: 0;
        letter-spacing: 2px;
        color: #fff;
    }

    .footer {
        position: absolute;
        bottom: 40px;
        left: 50%;
        width: 100%;
        margin-left: -50%;
        text-align: center;
        font-size: 12px;
        padding: 0;
        letter-spacing: 2px;
        color: #fff;
    }

    .container-login {
        z-index: 999;
        width: 100%;
        min-height: 100vh;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        /* padding: 15px; */
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        cursor: pointer;
        background-image: url('../../../../public/image/loginbg.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top;
    }

    .login-box {
        // z-index: 9999;
        width: 350px;
        background: #fff;
        border-radius: 5px;
        overflow: hidden;
        padding: 25px;
        -moz-box-shadow: 0px 2px 13px #eee;
        -webkit-box-shadow: 0px 2px 13px #eee;
        box-shadow: 0px 2px 13px #eee;
    }

    .login-title {
        display: block;
        font-family: 'Microsoft Yahei';
        font-size: 30px;
        color: #333333;
        line-height: 1.2;
        text-align: center;
        margin-bottom: 20px;
    }

    .submit-btn {
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-radius: 50px;
        background: #206bf5;
        opacity: 0.8;
        color: #fff;
    }

    .submit-btn:hover {
        opacity: 1;
    }

    .fenge {
        border-top: 1px dashed #e6e6e6;
    }

    .quite-box {
        padding: 20px;
        text-align: center;
    }

    .quite-icons {
        padding: 20px 0px;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }

    .quite-icons>.quite-icon {
        width: 35px;
        height: 35px;
        text-align: center;
        line-height: 35px;
        border-radius: 50%;
        padding: 10px;
        margin: 0 10px;
    }

    .quite-icons>.quite-icon:nth-of-type(1) {
        background: green;
    }

    .quite-icons>.quite-icon:nth-of-type(2) {
        background: #007bff;
    }

    .quite-text {
        font-size: 13px;
        color: #555;
    }

    .login-code {
        height: 38px;
        display: block;
        margin: 0px -20px;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
    }

    // 快速选择用户面板
    .page-login--quick-user {
        @extend %flex-center-col;
        padding: 30px 0px;
        border-radius: 4px;

        &:hover {
            background-color: $color-bg;

            i {
                color: $color-text-normal;
            }

            span {
                color: $color-text-normal;
            }
        }

        i {
            font-size: 36px;
            color: $color-text-sub;
        }

        span {
            font-size: 12px;
            margin-top: 10px;
            color: $color-text-sub;
        }
    }
</style>